import { useState, useEffect } from "react";
import style from "./index.module.scss";
import bg from "@/assets/images/daily-recharge/bg.png";
import bg1 from "@/assets/images/daily-recharge/bg1.png";
// import PayPage from "./pay-page";
import { Toast } from "react-vant";

const BaseUrl =
  process.env.REACT_APP_ENV === "prod"
    ? "https://webapi.pupupal.com"
    : "https://kk-test-webapi.sayhaiapp.com";

window.onPayCallback = function (isSucceed) {
  console.log(isSucceed ? "支付成功" : "支付失败");
  if (isSucceed) {
    window?.location?.reload();
  }
};

const Index = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const authorizationToken = urlParams.get("userId");
  console.log("authorizationToken", authorizationToken);

  // const [showPayPage, setShowPayPage] = useState(false);
  const [info, setInfo] = useState({
    continuousRechargeTimes: 0,
    todayCompleteCharge: false,
  });

  const getInfo = async () => {
    fetch(`${BaseUrl}/asset/recharge/active/daily/first/charge/info`, {
      method: "GET",
      headers: {
        Authorization: authorizationToken,
      },
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.code === 200 && response.data) {
          setInfo(response.data);
        } else {
          console.error("Failed to fetch ranking data:");
        }
      })
      .catch((error) => console.error("Error fetching ranking data:", error));
  };
  const clickPayNow = () => {
    if (info?.todayCompleteCharge) {
      Toast.info("今日已充值");
    } else {
      console.log("6元每日首充");
      window.pupu &&
        window.pupu.showPayDialog &&
        window.pupu.showPayDialog(6, "6元每日首充", "Daily_First_Charge");
      window.webkit &&
        window.webkit.messageHandlers &&
        window.webkit.messageHandlers.showPayDialog &&
        window.webkit.messageHandlers.showPayDialog.postMessage(
          6,
          "6元每日首充",
          "Daily_First_Charge"
        );
    }
  };

  useEffect(() => {
    if (authorizationToken) {
      getInfo();
    } else {
      console.error("Authorization token not found in URL");
    }
  }, []);

  return (
    <div className={style.container}>
      <img src={bg} alt="背景图" />
      <img src={bg1} alt="背景图" style={{ marginTop: -20 }} />
      <p className={style.text}>
        已累计充值{info?.continuousRechargeTimes || 0}天
      </p>
      <div
        className={`${style.btn} ${
          info?.todayCompleteCharge ? style.disabled : ""
        }`}
        onClick={clickPayNow}
      >
        {/* {"立即充值6元"} */}
      </div>
      {/* <PayPage
        showPayPage={showPayPage}
        onClose={() => setShowPayPage(false)}
      /> */}
    </div>
  );
};

export default Index;
